<!DOCTYPE html>
<html>
<head>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/jsp/head.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-tree.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-combobox.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-form.css">
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-text.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-tree.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-combobox.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-radio.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-checkbox.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-datetimepicker.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-form.js"></script>
<script src="${pageContext.request.contextPath}/static/js/menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/data.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/user.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/jquery/jquery.validate.js"></script>
<script type="text/javascript">
$(function () {
    $("#simpleForm").BootstrapForm({
    	items: [
    	    {
    	    	id: 'LOGIN_NAME',
    	    	label:'用户名',
    	    },
    	    {
    	    	id: 'LOGIN_PASSWORD',
    	    	label:'密码',
    	    	type: 'password',
    	    },
    	    {
    	    	id: 'USER_NAME',
    	    	label:'姓名',
    	    },
    	    {
    	    	id: 'USER_PHONE',
    	    	label:'固定电话',
    	    },
    	    {
    	    	id: 'USER_M_PHONE',
    	    	label:'手机号码',
    	    },
    	    {
    	    	id: 'USER_EMAIL',
    	    	label:'电子邮箱',
    	    },
    	    {
    	    	id: 'STATUS',
    	    	readonly: true,
    	    	label:'状态',
    	    },
    	    
    	]
    });
    
    //$("#simpleForm").BootstrapForm('setFormData',{STATUS: '关闭'});
    
    //$("#LOGIN_NAME").popover('show');
    //$("[data-toggle='popover']").popover();
    
	
    $("#adjustForm").BootstrapForm({
    	items: [
    	    {
    	    	id: 'LOGIN_NAME',    	    	
    	    	label:'用户名',
    	    	itemSize: 4,
    	    },
    	    {
    	    	id: 'LOGIN_PASSWORD',
    	    	label:'密码',
    	    	type: 'password',
    	    	itemSize: 4,
    	    },
    	    {
    	    	id: 'USER_NAME',
    	    	label:'姓名',
    	    	labelSize: 2,
    	    	itemSize: 3,
    	    },
    	    {
    	    	id: 'USER_PHONE',
    	    	label:'固定电话',
    	    	labelSize: 2,
    	    	itemSize: 3,
    	    },
    	    {
    	    	id: 'USER_M_PHONE',
    	    	label:'手机号码',
    	    },
    	    {
    	    	id: 'USER_EMAIL',
    	    	label:'电子邮箱',
    	    	itemSize: 7,
    	    },
    	    {
    	    	id: 'REMARK',
    	    	label:'备注',
    	    	type: 'textarea',
    	    	rows: 5,
    	    	itemSize: 11,
    	    },    	    
    	]
    });	
	
	
    $("#integrateForm").BootstrapForm({
    	items: [
    	    {
    	    	id: 'LOGIN_NAME',
    	    	label:'用户名',
    	    },
    	    {
    	    	id: 'LOGIN_PASSWORD',
    	    	label:'密码',
    	    	type: 'password',
    	    },
    	    {
    	    	id: 'USER_NAME',
    	    	label:'姓名',
    	    },
    	    {
    	    	id: 'USER_PHONE',
    	    	label:'固定电话',
    	    },
    	    {
    	    	id: 'USER_M_PHONE',
    	    	label:'手机号码',
    	    },
    	    {
    	    	id: 'USER_EMAIL',
    	    	label:'电子邮箱',
    	    },
    	    {
    	    	id: 'REMARK',
    	    	label:'备注',
    	    	type: 'textarea',
    	    	itemSize: 11,
    	    },    	    
    	    {
    	    	id: 'POSE',
    	    	label:'职务',
    	    	type: 'combobox',
    	    	options: {
    	    		data: [
    	    		       {value: 10000, text: "业务员"},
    	    		       {value: 20000, text: "经理"},
    	    		       {value: 30000, text: "总裁"},
    	    		    ]
    	    	}
    	    },
    	    {
    	    	id: 'SEX',
    	    	label:'性别',
    	    	type: 'radio',
    	    	options: {
    	    		name: 'sex',
    	    		data: [
    	    		       {value: 10000, text: "男"},
    	    		       {value: 20000, text: "女"},
    	    		    ]
    	    	}
    	    },
    	    {
    	    	id: 'ROLE',
    	    	label:'角色',
    	    	type: 'checkbox',
    	    	options: {
    	    		data: [
    	    		       {value: 10000, text: "管理员"},
    	    		       {value: 20000, text: "服务经理"},
    	    		       {value: 30000, text: "服务顾问"},
    	    		    ]
    	    	}
    	    },    	    
    	    {
    	    	id: 'ORG',
    	    	label:'所属机构',
    	    	type: 'combobox',
    	    	options: {
    	    		editor: {
    	    			type: 'tree',
    	    			options:{
    	    		    	expand: false,
    	    				data: treeData1.toTree('id','pid'),
    	    				onLeafClick: function(data){
    	    					$("#ORG").BootstrapCombobox('selectItem',data.id,data.text);
    	    				}
    	    		    }
    	    		}
    	    	}
    	    },
    	    {
    	    	id: 'BIRTH_DAY',
    	    	label:'生日',
    	    	type: 'datetime',
    	    	options: {
    	            language: 'zh-CN',
    	            autoclose: true,
    	            todayBtn: true,
    	            pickerPosition: "bottom-left",
    	            minuteStep: 5,
    	            format: 'yyyy-mm-dd',
    	            minView: 'month'
    	    	}
    	    },    	    
    	]
    });
	
});

function getData(){
	var formData = $("#integrateForm").BootstrapForm('getFormData');
	alert(JSON.stringify(formData));
}

</script>
</head>

<body>  
	<div class="container">  
		<nav id="menu"></nav>
		  
		<div class="panel panel-default">
	        <div class="panel-heading">默认表单</div>
			<div class="panel-body">
			    <div id="simpleForm"></div>
		     </div>
		     <div class="panel-footer">
		                   默认表单简略说明：                                                                                                                                         </br>
			    $("#simpleForm").BootstrapForm({                  </br>
			    	items: [                                     </br>
			    	    {                                          </br>
			    	    	id: 'LOGIN_NAME',                     </br>
			    	    	label:'用户名',                         </br>
			    	    },                                       </br>
			    	    {                                        </br>
			    	    	id: 'LOGIN_PASSWORD',                   </br>
			    	    	label:'密码',                           </br>
			    	    	type: 'password',                       </br>
			    	    },                                          </br>
			    	    {                                          </br>
			    	    	id: 'USER_NAME',                         </br>
			    	    	label:'姓名',                            </br>
			    	    },                                           </br>
			    	    {                                          </br>
			    	    	id: 'USER_PHONE',                       </br>
			    	    	label:'固定电话',                           </br>
			    	    },                                           </br>
			    	    {                                            </br>
			    	    	id: 'USER_M_PHONE',                     </br>
			    	    	label:'手机号码',                           </br>
			    	    },                                             </br>
			    	    {                                              </br>
			    	    	id: 'USER_EMAIL',                          </br>
			    	    	label:'电子邮箱',                             </br>
			    	    },                                            </br>			    	    
			    	]                                                  </br>
			    });	                                                  </br>
			 items属性是该表单控件的所有元素的汇总数组                                                                                                         </br>
			    每个表单元素的名称默认占用1份长度，值域默认占用3份长度，合计占用bootstrap12栅格系统中的4份长度	        </br>
			    因此表单控件默认的排版样式是每行有3个表单元素                                                                                                                                                               </br>
		     </div>	
	    </div>

		<div class="panel panel-default">
	        <div class="panel-heading">表单元素长度控制</div>
			<div class="panel-body">
			    <div id="adjustForm"></div>	    		    
		     </div>
		     <div class="panel-footer">
			    $("#adjustForm").BootstrapForm({                </br>
			    	items: [                                     </br>
			    	    {                                        </br>
			    	    	id: 'LOGIN_NAME',                     </br> 	    	
			    	    	label:'用户名',                       </br>
			    	    	itemSize: 4,                         </br>
			    	    },                                      </br>
			    	    {                                       </br>
			    	    	id: 'LOGIN_PASSWORD',                  </br>
			    	    	label:'密码',                          </br>
			    	    	type: 'password',                      </br>
			    	    	itemSize: 4,                          </br>
			    	    },                                          </br>
			    	    {                                          </br>
			    	    	id: 'USER_NAME',                       </br>
			    	    	label:'姓名',                           </br>
			    	    	labelSize: 2,                          </br>
			    	    	itemSize: 3,                             </br>
			    	    },                                           </br>
			    	    {                                            </br>
			    	    	id: 'USER_PHONE',                        </br>
			    	    	label:'固定电话',                            </br>
			    	    	labelSize: 2,                             </br>
			    	    	itemSize: 3,                            </br>
			    	    },                                              </br>
			    	    {                                            </br>
			    	    	id: 'USER_M_PHONE',                     </br>
			    	    	label:'手机号码',                           </br>
			    	    },                                            </br>
			    	    {                                             </br>
			    	    	id: 'USER_EMAIL',                         </br>
			    	    	label:'电子邮箱',                             </br>
			    	    	itemSize: 7,                             </br>
			    	    },                                           </br>
			    	    {                                             </br>
			    	    	id: 'REMARK',                             </br>
			    	    	label:'备注',                                 </br>
			    	    	type: 'textarea',                         </br>
			    	    	itemSize: 11,                              </br>
			    	    },                                             </br>   	    
			    	]                                                  </br>
			    });	                                                   </br>
			    可以通过定义每个元素的labelSize属性和itemSize属性来控制表单元素名称和值域的长度                              </br>
			   注：自定义的每个表单元素的总长度不能超过12且不能小于2   	                    </br>     
		     </div>	
	    </div>

	    
		<div class="panel panel-default">
	        <div class="panel-heading">表单与复杂控件的集成</div>
			<div class="panel-body">
			    <div id="integrateForm"></div>
			    <div><button class="btn btn-primary btn-sm" type="button" onclick="getData()">获取表单数据</button></div>		    		    
		     </div>
		     <div class="panel-footer">
		                          集成表单简略说明：                                                                                                                                                           </br>
			    $("#integrateForm").BootstrapForm({                     </br>
			    	items: [                                             </br>
			    	    {                                                 </br>
			    	    	id: 'LOGIN_NAME',                             </br>
			    	    	label:'用户名',                                 </br>
			    	    },                                                </br>
			    	    {                                                    </br>
			    	    	id: 'LOGIN_PASSWORD',                          </br>
			    	    	label:'密码',                                     </br>
			    	    	type: 'password',                                 </br>
			    	    },                                                     </br>
			    	    {                                                       </br>
			    	    	id: 'USER_NAME',                               </br>
			    	    	label:'姓名',                                      </br>
			    	    },                                                    </br>
			    	    {                                                        </br>
			    	    	id: 'USER_PHONE',                                 </br>
			    	    	label:'固定电话',                                     </br>
			    	    },                                                    </br>
			    	    {                                                     </br>
			    	    	id: 'USER_M_PHONE',                                   </br>
			    	    	label:'手机号码',                                      </br>
			    	    },                                                        </br>
			    	    {                                                          </br>
			    	    	id: 'USER_EMAIL',                                     </br>
			    	    	label:'电子邮箱',                                          </br>
			    	    },                                                          </br>
			    	    {                                                          </br>
			    	    	id: 'REMARK',                                            </br>
			    	    	label:'备注',                                             </br>
			    	    	type: 'textarea',                                          </br>
			    	    	itemSize: 11,                                          </br>
			    	    },    	                                                   </br>    
			    	    {                                                           </br>
			    	    	id: 'POSE',                                                </br>
			    	    	label:'职务',                                              </br>
			    	    	type: 'combobox',                                         </br>
			    	    	options: {                                                </br>
			    	    		data: [                                                </br>
			    	    		       {value: 10000, text: "业务员"},                    </br>
			    	    		       {value: 20000, text: "经理"},                     </br>
			    	    		       {value: 30000, text: "总裁"},                     </br>
			    	    		    ]                                                   </br>
			    	    	}                                                           </br>
			    	    },                                                             </br>
			    	    {                                                               </br>
			    	    	id: 'SEX',                                                    </br>
			    	    	label:'性别',                                                 </br>
			    	    	type: 'radio',                                                 </br>
			    	    	options: {                                                    </br>
			    	    		name: 'sex',                                               </br>
			    	    		data: [                                                     </br>
			    	    		       {value: 10000, text: "男"},                           </br>
			    	    		       {value: 20000, text: "女"},                           </br>
			    	    		    ]                                                        </br>
			    	    	}                                                              </br>
			    	    },                                                                   </br>
			    	    {                                                                </br>
			    	    	id: 'ROLE',                                                  </br>
			    	    	label:'角色',                                              </br>
			    	    	type: 'checkbox',                                           </br>
			    	    	options: {                                                  </br>
			    	    		data: [                                                 </br>
			    	    		       {value: 10000, text: "管理员"},                       </br>
			    	    		       {value: 20000, text: "服务经理"},                     </br>
			    	    		       {value: 30000, text: "服务顾问"},                       </br>
			    	    		    ]                                                      </br>
			    	    	}                                                            </br>
			    	    },                                                                </br>  	    
			    	    {                                                                 </br>
			    	    	id: 'ORG',                                                            </br>
			    	    	label:'所属机构',                                                      </br>
			    	    	type: 'combobox',                                                      </br>
			    	    	options: {                                                                </br>
			    	    		editor: {                                                             </br>
			    	    			type: 'tree',                                                       </br>
			    	    			options:{                                                                </br>
			    	    		    	expand: false,                                                          </br>
			    	    				data: treeData1.toTree('id','pid'),                                         </br>
			    	    				onLeafClick: function(data){                                                 </br>
			    	    					$("#ORG").BootstrapCombobox('selectItem',data.id,data.text);                </br>
			    	    				}                                                                       </br>
			    	    		    }                                                                        </br>
			    	    		}                                                                              </br>
			    	    	}                                                                                   </br>
			    	    },                                                                                      </br>
			    	    {                                                                                        </br>
			    	    	id: 'BIRTH_DAY',                                                                   </br>
			    	    	label:'生日',                                                                          </br>
			    	    	type: 'datetime',                                                                    </br>
			    	    	options: {                                                                           </br>
			    	            language: 'zh-CN',                                                                </br>
			    	            autoclose: true,                                                                    </br>
			    	            todayBtn: true,                                                                    </br>
			    	            pickerPosition: "bottom-left",                                                        </br>
			    	            minuteStep: 5,                                                                       </br>
			    	            format: 'yyyy-mm-dd',                                                              </br>
			    	            minView: 'month'                                                                      </br>
			    	    	}                                                                                       </br>
			    	    },                                                                                           </br>  	    
			    	]                                                                                                  </br>
			    });                                                                                                     </br>
			    如果需要表单元素展现为下拉框、日期输入等控件形式，可以通过定义表单元素的type属性来实现                                                                                                                                                            </br>
			    目前可以定义的type属性有textarea、combobox、radio、checkbox、datetime以及默认的text		                       </br>
			  options属性为集成元素的标准参数                                                                                                                                </br>
		     </div>	 
	    </div>	    
		
    </div>
</body>

</html>